<template>
  <view class="progress">
    <view class="top">
      会员：
      <span class="bold">{{ uName }}</span>
      <span v-if="uSex">|</span>
      <span v-if="uSex">{{ uSex }}</span>
      <span v-if="uAge">|</span>
      <span v-if="uAge">{{ uAge }}</span>
    </view>
    <view class="line-bar">
      <view class="progress-box">
        <progress
          :percent="active * 20"
          activeColor="#07C160"
          active-mode="forwards"
          active
          stroke-width="8"
          duration="5"
        />
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 搜索组件
 */
export default {
  props: {
    // 是否展示搜索按钮
    uName: {
      type: String,
      default: ''
    },
    uSex: {
      type: String,
      default: ''
    },
    uAge: {
      type: String,
      default: ''
    },
    progressNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      userInfo: {}
    };
  },
  computed: {
    active() {
      return this.$store.getters.active;
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style>
page {
  background: rgba(244, 244, 244, 1);
}
</style>
<style lang="scss">
.progress {
  color: rgba(0, 0, 0, 0.55);
  font-size: 32rpx;
  margin: 24rpx;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  .top {
    span {
      padding: 0 10rpx;
    }
    .bold {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .line-bar {
    margin-top: 24rpx;
    margin-bottom: 10rpx;
  }
}
.progress-box {
  border-radius: 8rpx;
  overflow: hidden;
}
</style>
